cursor位置に<input>を表示する
2021-05-22
dependencies
code:js
(async () => {
const {getValueFromInput} = await import('/api/code/takker/cursor位置に<input>を表示する/script.js');
const {scrapBindings} = await import('/api/code/takker/ScrapBindings/script.js');
await scrapBindings.install();
scrapBindings.push({key: 'ctrl+space', command: async () => alert(await getValueFromInput('time'))});
})();
dependencies
code:script.js
import {scrapboxDOM} from '../scrapbox-dom-accessor/script.js';
export const getValueFromInput = (type, initialValue) => new Promise((resolve, reject) => {
const form = document.createElement('form');
const input = document.createElement('input');
input.type = type ?? 'text';
if (initialValue) {
if (type === 'time' || type === 'date') {
input.valueAsDate = initialValue;
} else {
input.value = initialValue;
}
}
const confirm = () => {
if (type === 'time' || type === 'date') {
resolve(input.valueAsDate);
} else {
resolve(input.value);
}
input.remove();
};
input.addEventListener('blur', () => confirm());
input.addEventListener('keydown', ({key}) => {
if (key !== 'Enter') return;
confirm();
});
input.addEventListener('error', e => {
reject(e);
});
input.style.position = 'absolute';
input.style.top = scrapboxDOM.textInput.style.top;
input.style.left = scrapboxDOM.textInput.style.left;
document.getElementById('editor').appendChild(input);
input.focus();
});